<template>
  <view>
    <u-tabs :list="tabs" :is-scroll="false" :current="current" :active-color="theme" @change="change"></u-tabs>

    <view class="u-p-24">
      <view class="gap-24">
        <order status="订单已提价" :status-color="theme">
          <view class="flex-row justify-end align-center u-p-t-24" slot="btns" @click="$goto('/pages/order/peisong-detail')">
            <my-btn class="u-m-l-16" :size="[160, 60, 24]" border="1rpx solid #000" inline round>取消订单</my-btn>
            <my-btn class="u-m-l-16" :size="[160, 60, 24]" bg="linear-gradient(90deg, #FFA82B 0%, #FF8F34 99%)" color="#fff"
              inline round>立即付款</my-btn>
          </view>
        </order>
      </view>
      
      <view class="gap-24">
        <order status="商家已接单" :status-color="theme">
          <view class="flex-row justify-end align-center u-p-t-24" slot="btns" @click="$goto('/pages/order/peisong-detail')">
            <my-btn class="u-m-l-16" :size="[160, 60, 24]" border="1rpx solid #000" inline round>取消订单</my-btn>
            <my-btn class="u-m-l-16" :size="[160, 60, 24]" bg="linear-gradient(90deg, #FFA82B 0%, #FF8F34 99%)" color="#fff"
              inline round>联系商家</my-btn>
          </view>
        </order>
      </view>
      
      <view class="gap-24">
        <order status="已送达" :status-color="theme">
          <view class="flex-row justify-end align-center u-p-t-24" slot="btns" @click="$goto('/pages/order/peisong-detail')">
            <my-btn class="u-m-l-16" :size="[160, 60, 24]" border="1rpx solid #000" inline round>再来一单</my-btn>
            <my-btn class="u-m-l-16" :size="[160, 60, 24]" bg="linear-gradient(90deg, #FFA82B 0%, #FF8F34 99%)" color="#fff"
              inline round>确认收货</my-btn>
          </view>
        </order>
      </view>

      <view class="gap-24">
        <order status="预约时间" :status-color="theme">
          <view class="flex-row justify-end align-center u-p-t-24" slot="btns" @click="$goto('/pages/order/peisong-detail')">
            <my-btn class="u-m-l-16" :size="[160, 60, 24]" border="1rpx solid #000" inline round>再来一单</my-btn>
            <my-btn class="u-m-l-16" :size="[160, 60, 24]" bg="linear-gradient(90deg, #FFA82B 0%, #FF8F34 99%)" color="#fff"
              inline round>立即评价</my-btn>
          </view>
        </order>
      </view>
    </view>
  </view>
</template>

<script>
  import order from './components/order-row.vue'
  export default {
    components: {
      order
    },
    data() {
      return {
        theme: '#ffa62c',
        tabs: [{
            name: '全部'
          },
          {
            name: '待评价'
          },
          {
            name: '退款'
          }
        ],
        current: 0,
      };
    },
    methods: {
      change(index) {
        this.current = index;
      },
    }
  }
</script>

<style lang="scss">

</style>
